<template>
	<div>
		<!-- 热门城市 -->
		<div class="city-hot">
			<div class="hot-title">热门城市</div>
			<ul class="hot-list">
				<li v-for='(item,index) in hotCities' :key="index" >{{item.name}}</li>
				
			</ul>
		</div>
		
		
		<!-- list城市首字母列表 -->
		<div class="city-list">
			<template v-for='(item,index) in CityList' :key="index" >
				<div class="list-title">{{item.initial}}</div>
				<ol class="list-item">
					<li v-for='(lis,index) in item.list' :key="index" >{{lis.name}}</li>
				</ol>
				</template>
			</div>
	</div>
</template>

<script>
	export default{
		props:['CityList','hCity'],
		
	}
</script>

<style scoped>
	.city-list{
		width: 100%;
		font-size: 0.28rem;
	}
	.list-title{
		padding: 0.2rem 0.3rem;
	}
	.list-item{
		background-color: white;
		color: #212121;
		position: relative;
		overflow: hidden;
	}
	.list-item:before{
		content: "";
		position: absolute;
		border-left: 1px solid #ddd;
		border-right: 1px solid #ddd;
		width: 25%;
		height: 100%;
		left: 25%;/* 左边的作用，是将覆盖在ul上方的区域向左移动一个li标签的宽度 */
	}
	.list-item:after{
		content: "";
		position: absolute;
		border-right: 1px solid #ddd;
		width: 25%;
		height: 100%;
		right: 25%;
	}
	.list-item li{
		width: 25%;
		height: 0.9rem;
		text-align: center;
		line-height: 0.9rem;
		float: left;
		border-bottom:  1px solid #ddd;
		background-color: white;
	}
</style>
